<!-- <template>
    <div class="header" :style="positionStyle">
        <el-row :gutter="20" align="middle">
            <el-col :span="3" class="container-center">
                <el-autocomplete
                    v-model="searchStore.state"
                    :fetch-suggestions="searchStore.querySearchAsync"
                    placeholder="请输入搜索地址"
                    @select="searchStore.handleSelect"
                    :popper-append-to-body="false"
                >
                <template #prefix>
                    <el-icon ><Location /></el-icon>
                </template>
            </el-autocomplete>
            </el-col>
            <el-col :span="11" class="container-setting">
                <el-button @click="openSetting" :icon="Setting">地图配置</el-button>
                <el-button @click="vrStore.openVr" :class="[vrStore.visible ? 'active' : '']"  :icon="Location">全景</el-button>
                <el-button @click="openUploadVr"  :icon="Upload">上传全景</el-button>
                <el-button @click="openCollect"  :icon="FolderOpened">VR全景收藏列表</el-button>
            </el-col>
            <el-col :span="10" class="container-center end">
                <el-button v-if="!accountStore.isLogin" round @click="login" >登录</el-button>
                <el-popconfirm v-else  
                    title="确认退出账户"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    icon="el-icon-question"
                    icon-color="red"
                    @confirm="accountStore.logout" 
                >
                    <template #reference>
                        <el-avatar v-if="accountStore.account.user" :size="30" :src="accountStore.account.user.avr"/>
                        <el-avatar v-else :size="30">无</el-avatar>
                    </template>
                </el-popconfirm>

            </el-col>
        </el-row>
        <LoginDialog  ref="loginRef"/>
        <VrCollectDrawer ref="vrCollectRef" />
        <MapSettingDrawer ref="mapSettingRef"/>
        <VrUploadDrawer ref="vrUploadRef" />
    </div>
   
</template>

<script lang="ts" setup>
import { positionProps, usePosition } from '../composables/usePosition'
import { Location,Setting,Upload,FolderOpened } from '@element-plus/icons-vue'
import { ref } from 'vue'
// import LoginDialog from '@/components/login-dialog/index.vue'
import VrCollectDrawer from '@/components/vr-collect-drawer/index.vue'
import VrUploadDrawer from '@/components/vr-upload-drawer/index.vue'
import MapSettingDrawer from '@/components/map-setting-drawer/index.vue'
import {useAccountStore,useVrStore,useSearchStore} from '@/stores'
import { ElMessage } from 'element-plus'


const accountStore = useAccountStore()
const vrStore = useVrStore()
const searchStore = useSearchStore()
const loginRef = ref()
const vrCollectRef = ref()
const mapSettingRef = ref()
const vrUploadRef = ref()

const props = defineProps({
    ...positionProps,
    data: {
      type: Object,
      default: () => {}
    }
  })
  const { positionStyle } = usePosition(props)

const login = ()=>{
    loginRef.value.open()
}
const openUploadVr=()=>{
    if (!accountStore.isLogin) {
        ElMessage.error('请登录账户')
        return;
    }
    if (!accountStore.isAuth) {
        ElMessage.error('请在App够买会员')
        return;        
    }
    vrUploadRef.value.open() 
}

const openSetting=()=>{
    if (!accountStore.isLogin) {
        ElMessage.error('请登录账户')
        return;
    }
    mapSettingRef.value.open();
}
const openCollect=()=>{
    if (!accountStore.isLogin) {
        ElMessage.error('请登录账户')
        return;
    }
    vrCollectRef.value.open();
}

</script>

<style lang="scss" scoped>
.header{
    position: absolute;
    z-index: 999;
    padding: 5px 10px;
    :deep(.el-vue-search-box-container){
        width: 220px;
        height: 32px;
        border-radius: 20px;
        overflow: hidden;
        top: 5px;
        box-shadow:none

    }
    .el-row{
        height: 100%;
    }
    &-center{
        display: flex;
        align-items: center;
        img{
            width: 30px;
            height: 30px;
            border-radius: 2px;
        }
        span{
            font-size: 15px;
            font-weight: bold;
            color:var(--color-background);
            margin-left: 10px;
        }
        &.end{
            justify-content: end;
            .el-button:first-child{
                background: var(--color-theme);
                color: #fff;
                box-shadow: none;
                border: none;
            }
        }
    }
    :deep(.el-autocomplete .el-input__wrapper){
        border-radius: 20px; // 添加圆角
        border: none;
        box-shadow: none;
    }
    &-setting{
        :deep(.el-button){
            background: white;
            box-shadow: none;
            border: none;
            padding: 8px 10px;
            border-radius: 20px;
            color: #333;
        }
    }

   
    .active{
        background: var(--color-theme);
        color: white;
    }
}
</style> -->
